<template>



    <div class="container">


        <div class="login-container">
            <img style="width: 400px;margin-top: 20px;margin-left: 20px;" src="../assets/images/lcmis.png" alt="">
        </div>

        <div class="div-container">

            <div class="login-card">
                <div class="card-header">
                    <h2>艾尔赛物联网管理平台</h2>
                </div>
                <el-form :model="loginParams" :rules="rules" ref="ruleFormRef">
                    <el-form-item prop="username">
                        <el-input style="height: 40px;" v-model="loginParams.username" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input style="height: 40px;" v-model="loginParams.password" type="password"
                            placeholder="请输入密码" show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox style="margin-left: auto;" v-model="checkAll">记住密码</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"
                            style="width: 100%;margin-top: 20px;height: 40px;">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <div class="footer-text">
        <p>版权所有© 2025 深圳市艾尔赛科技有限公司</p>
        <p @click="redirectToWebsite" class="p_hover">粤ICP备2023036707号-2</p>
    </div>



</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { LoginApi } from '../api/index'
import type { ILogin } from '../api/index'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const checkAll = ref(false);
const loginParams = ref<ILogin>({
    username: '',
    password: ''
});
const rules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
};


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    // 使用 Promise 包裹 validate 函数，确保可以使用 await
    const valid = await new Promise<boolean>((resolve) => {
        formEl.validate((valid) => {
            if (valid) {
                resolve(true);
            } else {
                console.log('账号或密码不能为空');
                resolve(false);
            }
        });
    });
    if (valid) {
        let res = await LoginApi(loginParams.value);
        sessionStorage.setItem("access_token", res.data.access_token);
        if (checkAll.value) {
            localStorage.setItem('loginParams', JSON.stringify(loginParams.value));
        }
        router.replace({
            path: '/HomePage'
        });
    }
}

const redirectToWebsite = () => {
    ///点击超链接到备份号网址
    window.open('https://beian.miit.gov.cn/', '_blank'); // 新标签页打开链接
}



// 页面加载时，检查是否有保存的用户名和密码
onMounted(() => {
    const login = JSON.parse(localStorage.getItem('loginParams') || '{}');
    console.log('有数据', login)
    if (login.username && login.password) {
        loginParams.value = login;
        checkAll.value = true;
    }
});

</script>
<style scoped>
.container {
    height: 100vh;
    /* 背景色，可以根据需要调整 */
    background-image: url('../assets/images/background.jpg');
    /* background-color: #CDD0D6; */
    background-size: cover;
    /* 背景图覆盖整个页面 */
    background-position: center;
    /* 背景图居中 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
}

.div-container {
    display: flex;
    /* 使用 flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    height: 80vh;
}

.login-card {

    /* 使用 flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;

    width: 500px;
    height: 400px;
    background-color: #fff;
    margin-bottom: 50px;
    border: #C0C4CC 1px solid;
    box-shadow: 0 0 18px 0 rgba(31, 30, 30, 0.5);
    border-radius: 5px;
    /* margin-left: 60%; */
    animation: moveLabel 1s ease-out forwards;
    /* 设置动画 */
}

@keyframes moveLabel {
    0% {
        transform: translateY(20vh);
        /* 初始位置 */
    }

    100% {
        transform: translateY(0);
        /* 最终位置 */
    }
}

.card-header {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
    color: #409EFF;
}

.el-form {
    margin-left: 50px;
    margin-right: 50px;
}


/* 添加底部p标签的样式 */
.footer-text {
    position: absolute;
    bottom: 10px;
    /* 距离底部10px */
    text-align: center;
    /* 水平居中 */
    width: 100%;
    /* 让p标签宽度为100%，确保居中 */
}

.footer-text p {
    display: inline-block;
    /* 使每个p的宽度自动适应文本 */
    font-size: 14px;
    /* 设置字体大小 */
    color: white;
    /* 设置字体颜色 */
    margin: 0;
    /* 去除默认的上下外边距 */
    padding: 0;
    /* 去除内边距 */
    margin-left: 5px;
}

.footer-text p+p {
    margin-top: 5px;
    /* 在两个 <p> 标签之间增加适当的间距 */
}

.p_hover {
    cursor: pointer;
    /* 设置鼠标经过时变成手指 */
}

.p_hover:hover {
    /* background-color:#0056b3 ; */
    color: #0056b3 !important;
}
</style>